<template>
  <Div class="own-info">
      <Row class="is-ok">支付宝授权状态：<span :style="{color:is_ok !== '未授权'? '#008cce': ''}">{{ is_ok }} </span>
        <Button v-if="is_ok === '未授权'" @click="()=>{this.modal_show=true}">去授权</Button>
        <Button v-else @click="handleClickAgainAuth">重新授权</Button>
      </Row>
      <Row class="pl30">
          <h3>商户基础信息</h3>
          <ul>
              <li>商户类型：{{ baseInfo.merchant_type }}</li>
              <li>真实经营地址：{{ baseInfo.real_address }}</li>
              <li>公司名称：{{ baseInfo.store }}</li>
              <li>小票打印名称：{{ baseInfo.print_name }}</li>
          </ul>
      </Row>
      <Row class="pl30">
          <h3>商户联系人信息</h3>
          <ul>
              <li>联系人性质：{{ contact.contact_type }}</li>
              <li>联系人姓名：{{ contact.contact_name }}</li>
              <li>联系电话：{{ contact.contact_tel }}</li>
              <li>公司职务：{{ contact.position }}</li>
              <li>邮箱：{{ contact.contact_email }}</li>
          </ul>
      </Row>
      <Row class="pl30 pact">
          <h3>相关协议</h3>
          <p>
            <span @click="pactGetInfo(3)">《余利宝服务协议》</span>
            <span @click="pactGetInfo(2)">《移动支付收单服务协议》</span>
            <span @click="pactGetInfo(1)">《网商银行账户服务协议》</span>
          </p>
      </Row>
      <Modal v-model="modal_show" :transfer="false" title="支付宝授权" class-name="author">
          <p>授权支付宝须与入账支付宝账号一致，请先在手机上登录入账支付宝账号，再授权</p>
          <p><img :src="baseInfo.qrcode" alt="二维码加载失败"></p>
          <Label>支付宝授权码</Label>
          <Div slot="footer"></Div>
      </Modal>
      <Modal v-model="pact" title="" class="pactMsg" :transfer="false">
        <div v-html="pactMsg"></div>
        <div slot="footer"></div>
      </Modal>
      <Modal v-model="password" title="验证管理员密码" width="400" @on-visible-change="handleCloseModal">
        <Form :model="formInline" :rules="rules" ref="pwd">
          <Form-item prop="password">
            <i-input type="password" v-model="formInline.password" placeholder="请输入管理员密码" style="width:300px;"></i-input>
        </Form-item>
        </Form>
        <div slot="footer">
          <i-button type="primary" :loading="va_loading" @click="handleClickValidPassword">确认验证</i-button>
        </div>
      </Modal>
  </Div>
</template>

<script>
import { baseInfoInit, handClickPactInfo, validPassword } from '@/api/basic'
import { mapGetters } from 'vuex'

export default {
  name: 'own-info',
  data(){
    return{
      is_ok: '无',
      modal_show:false,
      pact: false,
      password: false,
      va_loading: false,
      pactMsg: '',
      url: '',
      baseInfo: {
      merchant_type: '无',
      real_address: '无',
      store: '无',
      print_name: '无',
      qrcode: ''
      },
      contact: {
      contact_email: '无',
      contact_name: '无',
      contact_tel: '无',
      contact_type: '无',
      position: '无'
      },
      formInline: {
        password: ''
      },
      rules: {
        password: [{ required: true, message: '请填写管理员密码', trigger: 'blur' }]
      }
    }
  },
  methods:{
    init() {
      baseInfoInit().then(response => {
        this.is_ok = response.data.data.status
        this.baseInfo.merchant_type = response.data.data.basic.merchant_type
        this.baseInfo.real_address = response.data.data.basic.real_address
        this.baseInfo.store = response.data.data.basic.store
        this.baseInfo.print_name = response.data.data.basic.print_name
        this.baseInfo.qrcode = response.data.data.qrcode
        this.contact.contact_email = response.data.data.contact.contact_email
        this.contact.contact_name = response.data.data.contact.contact_name
        this.contact.contact_tel = response.data.data.contact.contact_tel
        this.contact.contact_type = response.data.data.contact.contact_type
        this.contact.position = response.data.data.contact.position
      })
    },
    pactGetInfo(type) {
      handClickPactInfo(this.id, type).then(response => {
        this.pact = true
        this.pactMsg = response.data.result
      })
    },
    handleClickAgainAuth() {
      this.password = true
    },
    handleClickValidPassword() {
      this.$refs['pwd'].validate((valid) => {
        if (valid) {
          validPassword(this.formInline).then(res => {
            if (res.data.code === 0) {
              this.$Message.success(res.data.message)
              this.password = false
              this.$nextTick(() => {
                this.modal_show = true
              })
            } else {
              this.$Message.error(res.data.message)
            }
          })
        }
      })
    },
    handleCloseModal(v) {
      if (!v) {
        this.$refs['pwd'].resetFields()
      }
    }
  },
  mounted(){
    this.init()
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  }
}
</script>

<style lang="less" scoped>
    @import '../own-space.less';
</style>
